<template>
  <div>
    <p>您输入的地址有误，请重新检查</p>
    <router-link replace to="/" tag="button" active-class="sss">回到首页</router-link><br>
    <router-link :to="path+'1'" tag="mark">view1</router-link>
    <!-- *to属性：表示链接的地址 -->
    <!-- tag属性：表示链接呈现的标签 -->
    <!-- active-class属性：链接激活时，带有一个指定的class，方便写样式 -->
    <hr>
    <button @click="jump('/')">回到首页</button>
    <button @click="jump('/view1')">view1</button>
    <button @click="go(1)">前进</button>
    <button @click="go(-1)">后退</button>
    <button @click="back">后退2</button>
    <hr>
    <p>没有历史记录</p>
    <button @click="change('/')">回到首页</button>
    <button @click="change('/view1')">view1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      path: 'view'
    }
  },
  methods: {
    jump(path) {
      // ...复杂的计算过程
      // if(ss) {

      // }else {

      // }
      // 向历史记录中添加一条记录
      this.$router.push(path)
    },
    change(path) {
      // 不常用。不会留下记录。只是用新的地址替换老的地址
      this.$router.replace(path)
    },
    go(num) {
      // 不常用。参数是一个整数，如果是整数就是前进几部，负数就是后退几步
      this.$router.go(num)
    },
    back() {
      // 返回上一个页面
      this.$router.back()
    }
  }
}
</script>
<style lang="">
  
</style>